﻿<link href="/Common/layim/dist/css/layui.css" rel="stylesheet" />
<style>


    .layui-col-md6 {
        cursor: move;
        border: 1px dashed #639BF6;
    }

    .li {
        margin: 10px;
    }

    ._one ._two {
        border: 1px dashed #639BF6;
    }
</style>


<style>
    body .site-demo-title,
    body .layui-layout-admin .site-demo {
        left: 360px
    }

    .layui-layout-admin .site-demo-body {
        top: 107px;
    }
</style>
<div class="layui-side layui-side-child">
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree site-demo-table-nav">
            <li class="layui-nav-item layui-this">
                <a onclick="FormDesign.AddHtml(this);" href="javascript:;" data-target="<div onclick='FormDesign.SingleClick(this)' class='layui-col-md6'   ><label class='layui-form-label'>标题</label><div class='layui-input-block'><input lay-verify='required' lay-filter='column' data-target='' class='layui-input'></div></div>">输入框</a>
            </li>

            <li class="layui-nav-item layui-this">
                <a onclick="FormDesign.AddHtml(this);" href="javascript:;" data-target="<div  onclick='FormDesign.DoubleClick(this)' class='layui-form-item layui-form-text'><label class='layui-form-label'>标题</label><div class='layui-input-block'><textarea placeholder='内容' data-target='' class='layui-textarea baiduEditor'></textarea></div> </div>">编辑框</a>
            </li>
            <li class="layui-nav-item layui-this">
                <a onclick="FormDesign.AddHtml(this);" href="javascript:;" data-target="<div onclick='FormDesign.SingleClick(this)' class='layui-col-md6' ><label class='layui-form-label'>排序</label><div class='layui-input-inline'> <input type='number' data-target='' name='Sort' placeholder='排序' autocomplete='off' class='layui-input'></div></div>">短输入框</a>
            </li>
            <li class="layui-nav-item layui-this">
                <a onclick="FormDesign.AddHtml(this);" href="javascript:;" data-target="<div onclick='FormDesign.DropDown(this)' class='layui-col-md6' ><label class='layui-form-label'>下拉</label> <div class='layui-input-inline'><select name='quiz2' data-target='' class='asselect'><option value=''>请选</option></select></div></div>">下拉选项</a>
            </li>
            <li class="layui-nav-item layui-this">
                <a onclick="FormDesign.AddHtml(this);" href="javascript:;" data-target="<div onclick='FormDesign.BaiduUpload(this)' class='layui-col-md6'><label class='layui-form-label'>背景图片</label> <div class='layui-input-block baiduupload'><img class='as-imgs' style='width:100px;height:100px' /><input type='text' class='asup-value' value='' class='layui-input field-img' style='display:none' />&nbsp; &nbsp; &nbsp; &nbsp; <button type='button' class='layui-btn layui-btn-sm j_upload_img_btn'>选择</button></div> </div>">百度上传控件</a>
            </li>


            <li class="layui-nav-item layui-this">
                <a onclick="FormDesign.AddHtml(this);" href="javascript:;" data-target="<div onclick='FormDesign.DropDown(this)' class='layui-col-md6' ><label class='layui-form-label'>下拉</label> <div class='layui-input-inline'><select name='quiz2' data-target='' class='asselect'><option value=''>请选</option></select></div></div>">普通上传控件</a>
            </li>
            <li class="layui-nav-item layui-this">
                <a onclick="FormDesign.AddHtml(this);" href="javascript:;" data-target="<div onclick='FormDesign.RadioDown(this)' class='layui-col-md6'>   <label class='layui-form-label'>单选框</label><div class='layui-input-block asRadio'><input type='radio' name='sex' value='男' title='男'><input type='radio' name='sex' value='女' title='女' > </div>">单选框</a>
            </li>
            <li class="layui-nav-item layui-this">
                <a onclick="FormDesign.AddHtml(this);" href="javascript:;" data-target=" <div onclick='FormDesign.CheckBox(this)' class='layui-col-md6'><label class='layui-form-label'>复选框</label> <div class='layui-input-block asCheckBox'><input type='checkbox' name='like[write]' title='写作'><input type='checkbox' name='like[read]' title='阅读'></div></div>">复选框</a>
            </li>

        </ul>
    </div>
</div>
<div class="layui-body layui-tab-content site-demo site-demo-body" style="left: 200px;    top: 0px;">
    <div class="layui-btn-container">
        <div class="ng-pristine ng-valid" style="    background: #e6e6e6;">
            <input class="layui-btn layui-btn-sm" type="text" name="_fmname" id="_fmname" placeholder="表名称" style="text-align: left;color: #009688; background-color: #fff;">
            <input class="layui-btn layui-btn-sm" type="text" name="_rormname" id="_rormname" placeholder="表单名称" style="text-align: left;color: #009688; background-color: #fff;">
            <button class="layui-btn layui-btn-sm" onclick="FormDesign.jiazha()">根据数据生成</button>
            <button class="layui-btn layui-btn-sm" onclick="FormDesign.yulan()">查看</button>
            <button class="layui-btn layui-btn-sm" onclick="FormDesign.faburun()">发布</button>
        </div>
    </div>
    <br />    <br />

    <form class="layui-form">
        <div class="layui-row layui-col-space15 layui-form-item">
            <!--多行输入框-->
            <div class="_two"></div>
            <!--一行行输入框-->
            <div class="_one"></div>
        </div>
    </form>


</div>
<script src="/Common/layim/dist/layui.all.js"></script>
<script>
    var $ = null, FormDesign = null;
    console.log(9399)
    layui.config({
        base: '/Common/layim/layui_exts/' //指定 winui 路径
        , version: '1.0.0-beta'
    }).extend({  //指定js别名
        dragarrange: 'drag-arrange',
        FormDesign: 'FormDesign',
        common: 'common'
    }).define(['dragarrange', 'FormDesign', 'jquery', 'common'], function (exports) {
        $ = layui.jquery;
        console.log(999)
        FormDesign = layui.FormDesign; var $ = layui.jquery, dragarrange = layui.dragarrange;
        form = layui.form; layer = layui.layer;
        $('.draggable-element').arrangeable();
        $(document).on('click', '.layui-btn', function () {
            var that = $(this);
            var target = that.data('target');
            console.log(target);
            $('.layui-row').append(target);
            $('.layui-col-md6').arrangeable();

            form.render(); //更新全部
            $('.layui-col-md6').off('dblclick').on('dblclick', function () {
                shuangji666(this);
            });
        });

        var key = common.getRequestNg().key;
        if (key != null) {
            console.log(111)
            $.get('/api/Form/FormTable?table=' + key, {}, function (res) {
                var dat = JSON.parse(res);
                var target = ""; var fs = false;
                $.each(dat.data, function (i, item) {
                    if (item.ColumnType.toLowerCase() == "uniqueidentifier".toLowerCase()) {
                        target = "<div class='layui-col-md6' ><label class='layui-form-label'>" + item.Description + "</label><div class='layui-input-block'><input lay-verify='required' value='00000000-0000-0000-0000-000000000000' placeholder='请输入" + item.Description + "' name='" + item.ColumnsName + "' id='" + item.ColumnsName + "' lay-filter='column' class='layui-input'/></div>";
                    } else {
                        target = "<div class='layui-col-md6' ><label class='layui-form-label'>" + item.Description + "</label><div class='layui-input-block'><input lay-verify='required' placeholder='请输入" + item.Description + "' name='" + item.ColumnsName + "' id='" + item.ColumnsName + "' lay-filter='column' class='layui-input'/></div>";
                    }

                    $('.layui-row').append(target);
                    if (!fs) {
                        $("#_fmname").val(item.TableName); fs = true;
                    }

                });



                $('.layui-col-md6').arrangeable();
                form.render(); //更新全部
                $('.layui-col-md6').off('dblclick').on('dblclick', function () {
                    shuangji666(this);
                });
            });
        }
    });
    function shuangji666(_this) {
        that = $(_this);
        console.log(that);
        var key = that.find('.layui-form-label').eq(0);
        var value = that.find('.layui-input').eq(0);

        layer.open({
            id: 1,
            type: 0,
            title: '字段属性编辑',
            skin: 'layui-layer-rim',
            area: ['750px', 'auto'],
            //
            content: ' <div class="row" style="width: 700px;  margin-left:7px; margin-top:10px;">'
            + '<div class="col-sm-12">'
            + '<div class="input-group">'
            + '<span class="input-group-addon"> 标题:</span>'
            + '<input id="fd_title" type="text" class="form-control" placeholder="请输入显示标题">'
            + '</div>'
            + '</div>'
            + '<div class="col-sm-12" style="margin-top: 10px">'
            + '<div class="input-group">'
            + '<span class="input-group-addon"> Name  :</span>'
            + '<input id="fd_id" type="text" class="form-control" placeholder="请再唯一Name">'
            + '</div>'
            + '</div>'
            + '<div class="col-sm-12" style="margin-top: 10px">'
            + '<div class="input-group">'
            + '<span class="input-group-addon"> 值  :</span>'
            + '<input id="fd_value" type="text" class="form-control" placeholder="请再输入默认值">'
            + '</div>'
            + '</div>'
            + '<div class="col-sm-12" style="margin-top: 10px">'
            + '<div class="input-group">'
            + '<span class="input-group-addon">类型:</span>'
            + '<select  id="fd_type" lay-verify="" style="height: 34px;width:100%; padding: 6px 12px; font-size: 14px; line-height: 1.42857143;color: #555;background-color: #fff; background-image: none;border: 1px solid #ccc; border-radius: 4px;" ><option>button</option><option>checkbox</option><option>color</option><option>date</option><option>datetime</option><option>datetime-local</option><option>email</option> <option>hidden</option><option>image</option><option>password</option><option>number</option><option>tel</option><option>text</option></select>'
            + '</div>'
            + '</div>'
            + '<div class="col-sm-12" style="margin-top: 10px">'
            + '<div class="input-group">'
            + '<span class="input-group-addon"> 必填:</span>'
            + '<input type="radio" name="fd_required" id="fd_required" value="是" title="是"><label for="fd_required">是</label><input type="radio" name="fd_required" id="fd_required" value="否" title="否"><label for="fd_required">否</label>'
            + '</div>'
            + '</div>'
            + '<div class="col-sm-12" style="margin-top: 10px">'
            + '<div class="input-group">'
            + '<span class="input-group-addon"> 编辑:</span>'
            + '<input type="radio" name="fd_disabled" id="fd_disabled" value="是" title="是"><label for="fd_disabled" checked>是</label><input type="radio" name="fd_disabled" id="fd_disabled" value="否" title="否"><label for="fd_disabled">否</label>'
            + '</div>'
            + '</div>'
            + '</div>'
            ,
            btn: ['保存', '取消', '删除'],
            success: function (layero, index) {
                $("#fd_type").val(value[0].type), $("#fd_id").val(value[0].id), $("#fd_title").val(key[0].innerText), $("#fd_value").val(value[0].value),
                    fd_required = value[0].getAttribute('lay-verify');
                if (fd_required == null || fd_required == "") { $("input:radio[name=fd_required][value='否']").attr('checked', 'true'); }
                else { $("input:radio[name=fd_disabled][value='是']").attr('checked', 'true'); }
                fd_disabled = value[0].getAttribute('disabled');
                if (fd_disabled == null || fd_disabled == "") { $("input:radio[name=fd_disabled][value='否']").attr('checked', 'true'); }
                else { $("input:radio[name=fd_disabled][value='是']").attr('checked', 'true'); }

            },
            btn1: function (index, layero) {
                var fd_type = $("#fd_type").val(), fd_id = $("#fd_id").val(), fd_title = $("#fd_title").val(), fd_required = $('input:radio[name="fd_required"]:checked').val(), fd_value = $("#fd_value").val(), fd_disabled = $('input:radio[name="fd_disabled"]:checked').val();
                if ($.trim(fd_id).length > 0 && $.trim(fd_title).length > 0) {
                    try {
                        key.data('title', fd_title).html(fd_title);

                        switch (value[0].tagName.toLowerCase()) {
                            case "input":
                                value[0].id = fd_id, value[0].name = fd_id, value[0].type = fd_type, value[0].placeholder = "请输入" + fd_title, value[0].value = fd_value;
                                if (fd_required == "是") { $(value).attr("lay-verify", "required"); } else { $(value).removeAttr("lay-verify"); }
                                if (fd_disabled == "是") { $(value).attr("disabled", "disabled"); } else { $(value).removeAttr("disabled"); }
                                break;
                        }
                        layer.close(index);
                        layer.msg("修改成功");

                    } catch (e) {
                        layer.close(index);
                        layer.msg("修改失败" + e);
                        console.log(e);
                    }


                }
            },
            btn2: function (index, layero) {
                layer.close(index);
            },
            btn3: function (index, layero) {
                if (confirm('确定要删除吗？')) {

                    var parent = that;
                    parent.remove();
                    if ($('.customerlist .customeritem').length == 0) $('.tips').show();
                }
            }

        });

    }


    function yulan() {
        if ($("#_fmname").val().length <= 0) {
            layer.msg("请填写名称");
            return false;
        }
        //添加表名
        if ($("#_table") != null) {
            var tab = "<input lay-verify='required' name='_table' id='_table' value='" + $("#_fmname").val() + "'  lay-filter='column' class='layui-input' style='display: none;'/>";
            $(".layui-row").append(tab);
            form.render(); //更新全部
        }

        //页面层
        $.ajax({

            type: "Post",
            url: "/api/FormDesign/FormDesignHtml",
            //  headers: { "Authorization": "bearer " + window.sessionStorage["token"] },
            data: { html: $(".layui-form").html(), name: $("#_fmname").val(), type: true },
            //dataType: "text/html; charset=utf-8",
            success: function (data) {
                layer.open({
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['100%', '100%'], //宽高
                    content: "/index.html#/" + data
                });
                // setForm("forms", data.data);
            },
            error: function (txt) {
                layer.alert("网络异常错误，请稍后再试", { title: "温馨提示" });

            }
        })

    }

    function deleteitem() {
        if (confirm('确定要删除吗？')) {
            var that = $(this);
            var parent = that.parent();
            parent.remove();
            if ($('.customerlist .customeritem').length == 0) $('.tips').show();
        }

    }
</script>


